import { fetchPersonalBorrowBooList } from '@/service/personnalCenter';
import { useRequest } from 'ahooks';
import { Row, Col } from 'antd';
import Book from '../Book';
import styles from './index.scss';
export default function BookList(props: any) {
    const userId = props.match.params.id;
    const { data, loading } = useRequest(
        async () => {
            const res = await fetchPersonalBorrowBooList(userId);

            if (res.code !== 200) {
                return [];
            }
            return res.data ?? [];
        },
        { manual: false },
    );
    return (
        <div className={styles.booksWrap}>
            <div className={styles.title}>
                <span>书籍列表</span>
                <span className={styles.description}>借阅中</span>
            </div>

            <Row gutter={[18, 30]}>
                {data?.map((item) => (
                    <Col span={24 / 8}>
                        <Book {...item} />
                    </Col>
                ))}
            </Row>
        </div>
    );
}
